<template>
  <div id="category">
    <nav-bar class="catagory-nav">
      <div slot="center">商品分类</div>
    </nav-bar>
    <div class="contentBox">
      <scroll class="left">
        <div v-for="(item, index) in categoryList" class="text"
          :class="{active : index === currentIndex}"
          @click="titleClick(item, index)">{{item.title}}</div>
      </scroll>
      <scroll class="right">
        <goods-list :goods="categoryDetailList"/>
      </scroll>
    </div>


  </div>
</template>

<script>
  import Scroll from 'components/common/scroll/Scroll.vue'
  import NavBar from 'components/common/navbar/NavBar.vue'
  import GoodsList from 'components/content/goods/GoodsList.vue'

  import {getCategory, getSubcategory, getCategoryDetail} from 'network/category.js'

  export default {
    name: "Category",
    data() {
      return {
        scroll: null,
        categoryList: [],
        categoryDetailList: [],
        subcategoryList: [],
        currentIndex: 0
      }
    },
    methods: {
      titleClick(item, index) {
        if (this.currentIndex === index) return;
        this.currentIndex = index;
        this.getCategoryDetail(this.categoryList[this.currentIndex].miniWallkey, "pop");
        this.getSubcategory(item.maitKey);
      },
      //初始化category
      initCategory() {
        getCategory().then(res => {
          this.categoryList = res.data.category.list;
          this.$nextTick(() => {
            this.getSubcategory(this.categoryList[0].maitKey);
            this.getCategoryDetail(this.categoryList[0].miniWallkey, "pop");
          })
        })
      },
      //获取category详情
      getCategoryDetail(key, type) {
        getCategoryDetail(key, type).then(res => {
          this.categoryDetailList = [...res];
        })
      },
      //获取subcategory
      getSubcategory(key) {
        getSubcategory(key).then(res => {
          this.subcategoryList = [...res.data.list];
        })
      }
    },
    components: {
      NavBar,
      Scroll,
      GoodsList
    },
    created() {
      this.initCategory();
    },
    mounted() {
      // this.scroll = new BScroll('.wrapper', {
      //   probeType: 3,
      //   pullUpload: true,
      //   click: true
      // })
      // this.scroll.on('scroll', position => {
      //   // console.log(position);
      // })
    }
  }
</script>

<style scoped>
  #category {
    height: 100vh;
    position: relative;
  }
  .contentBox {
    width: 100%;
    height: calc(100% - 44px - 49px);
    display: flex;
    overflow: hidden;
  }
  .left {
    width: 27%;
    height: 100%;
  }
  .right {
    flex: 1;
    height: 100%;
  }

  /*.content {*/
  /*  height: 100%;*/
  /*}*/
  .catagory-nav {
    background-color: var(--color-tint);
    color: #ffffff;
    font-size: 18px;
  }
  .text {
    text-align: center;
    font-size: 18px;
    line-height: 40px;
    border-bottom: 2px solid #eeeeee;
  }
  .active {
    color: var(--color-high-text);
    border-left: 5px solid var(--color-high-text);
  }
</style>
